<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
  <a-table
      :columns="columns"
      :data-source="datas">
  </a-table>
  </a-layout-content>
  </a-layout>
</template>
<script lang="ts">

import {defineComponent,onMounted,ref} from 'vue';
import axios from 'axios';

export default defineComponent({
  name:'Home',
  setup(){
    const datas = ref();
    const columns = [
      {
        title:'州/省',
        dataIndex:'state'
      },
      {
        title: '国家',
        dataIndex: 'country'
      },
      {
        title: '新冠累计总人数',
        dataIndex: 'latestTotalCases',
        key:'latestTotalCases'
      },
      {
        title: '单日新增人数',
        dataIndex: 'diffFromPrevDay',
        key: 'diffFromPrevDay'
      }
    ];

    //数据查询
    const handleQuery = ()=>{

      axios.get("http://localhost:8080/test/list").then((response)=>{

        const data = response.data;
        console.info(data);
        datas.value = data.content;

      });
    };

    onMounted(()=>{
      handleQuery();
    });

    return{
      datas,
      columns
    }
  }
});
</script>

<style scoped>
img{
  width:50px;
  height: 50px;
}
</style>
